<template>
  <div class="send-card">
    <div class="send-card-left">
        <img class="send-card-avater" :src="getLocalStaff().avater"/>
    </div>
    <div class="send-card-right">
      <textarea class="send-text-area" :placeholder="placeHolder" v-model="message"></textarea>
      <div class="send-card-bottom-bar">
        <div class="icon-btn-group" v-if="!hasOperationsBar"></div>
        <div class="icon-btn-group" v-if="hasOperationsBar">
          <BarChartOutlined class="icon-btn"></BarChartOutlined>
          <a-upload
            class="image-uploader"
            :customRequest="uploadImage"
            v-model:file-list="postFileList"
            list-type="picture"
            accept="image/png, image/jpeg"
            multiple
            @remove="removeImage"
            :max-count="4"
          >
            <FileImageOutlined class="icon-btn"></FileImageOutlined>
          </a-upload> 
        </div>
        <a-button class="send-btn" shape="round" type="primary" @click="post">发布</a-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import useStaff from '@/composable/staff';
import { ref } from 'vue';
import { FileImageOutlined, BarChartOutlined } from '@ant-design/icons-vue';
import useImageUploader from '@composable/upload-image';
import { useI18n } from 'vue-i18n';

const { getLocalStaff } = useStaff();
const { t } = useI18n();

const { uploadImage, removeImage, postFileList, postFileUrls } = useImageUploader(t, 'post-images');

defineProps({
  hasOperationsBar: {
    type: Boolean,
    default: true
  },
  placeHolder: {
    type: String,
    default: "有什么新鲜事?"
  }
})

const message = ref('');

// emit
const emit = defineEmits(['on-post'])

const post = function() {
  emit('on-post', {
    message: message.value,
    resources: postFileUrls.value
  });
  message.value = '';
}
</script>

<style scoped>
.send-card {
  display: flex;
  flex-direction: row;
  padding: 10px 15px;
}
.send-card-avater {
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: 100%;
}

.send-card-avater {
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: 100%;
}

.send-card-right {
  padding-left: 15px;
  position: relative;
  width: 100%;
}
.send-text-area {
  outline: none;
  border: none;
  width: 100%;
  min-height: 60px;
  font-size: 1.4em;
  border-bottom: #eee 0.5px solid;
  resize: none;
}

::-webkit-scrollbar {
  display: none;
}


.send-card-bottom-bar {
  margin-bottom: 20px;
  margin-top: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.icon-btn-group {
  flex: 1;
  display: flex;
  flex-direction: row;
}

.icon-btn-group .icon-btn{
  margin-right: 20px;
  color: #40a9ff;
}

.image-uploader :deep(.ant-upload-list-item) {
  float: left;
  width: 200px;
  margin-right: 8px;
}
.image-uploader [class*='-upload-list-rtl'] :deep(.ant-upload-list-item) {
  float: right;
}
</style>